<template>
  <view class="index-page">
    <view style="content:' ';height:100px;width:100%;background:#eee"></view>
    <CScroll @onLower="onLower" @onRefresh="onRefresh">
      <view class="scroll-item" v-for="item in listNum" :key="item">
        {{ item }}
      </view>
    </CScroll>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import CHeader from '@/components/c-header'
import TopBar from '@/components/top-bar'
import CScroll from '@/components/c-scroll'
import Taro from '@tarojs/taro'

const scrollH = ref(500)
const scroll = ({ detail }) => {
  const { scrollTop } = detail
}
const listNum = ref(0)

const onRefresh = () => {
  setTimeout(() => {
    listNum.value = 10
  }, 350)
}

const onUpper = e => {}

const onLower = () => {
  setTimeout(() => {
    listNum.value += 10
  }, 1500)
}
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';

.index-page {
  .content {
    content: ' ';
  }
}

.scroll-item {
  height: 100px;
  border: solid 1px #edf;
}
</style>
